import { IPSModelObject } from '@ibiz/dynamic-model-api';
import { Component, Host, h, Prop, VNode } from '@stencil/core';

@Component({
  tag: 'ibz-model-list',
  styleUrl: 'ibz-model-list.scss',
})
export class IBzModelList {
  @Prop()
  getName: (model: IPSModelObject) => string;

  @Prop()
  models: IPSModelObject[] = [];

  renderItem(item: IPSModelObject): VNode {
    return <div class='ibz-model-list-item'>{this.getName ? this.getName(item) : item.codeName}</div>;
  }

  render() {
    return (
      <Host class='os-container ibz-model-list'>
        <div class='ibz-model-list-header'></div>
        <div class='ibz-model-list-content'>{this.models.map(item => this.renderItem(item))}</div>
      </Host>
    );
  }
}
